<template>
    <div class="header">
        <div class="content-wrapper">
            <div class="avatar">
                <img :src="seller.avatar">
            </div>
            <div class="content">
                <div class="title">
                    <span class="brand"></span>
                    <span class="name">{{seller.name}}</span>
                </div>
                <div class="description">{{seller.description}}/{{seller.deliveryTime}}分钟送达</div>
                <div class="support" v-if="seller.supports">
                    <span class="icon" :class="classMap[seller.supports[0].type]" ></span>
                    <span class="text">{{seller.supports[0].description}}</span>
                </div>
            </div>
            <div class="support-count"  @click="showDetail">
							<span>5个</span>
							<i class="icon-keyboard_arrow_right"></i>
						</div>
        </div>
        <div class="bulletin-wrapper" @click="showDetail">
					<span class="bulletin-title"></span>
					<span class="bulletin-text">{{seller.bulletin}}</span>
					<i class="icon-keyboard_arrow_right"></i>
				</div>
				<div class="background">
					<img :src="seller.avatar" width="100%" height="100%">
				</div>
				<transition name="fade">
				<div class="detail" v-show="detailShow">
					<div class="detail-wrapper">
						<div class="detail-main">
							<div class="name">粥品香坊（回龙观）</div>
							<star :size="48" :score="4.5"></star>
							<div class="title">
								<div class="text">优惠信息</div>
							</div>
							<ul class="supports">
								<li class="supports-item">在线支付满28减5</li>
								<li class="supports-item">在线支付满28减5</li>
								<li class="supports-item">在线支付满28减5</li>
								<li class="supports-item">在线支付满28减5</li>
							</ul>
							<div class="title">
								<div class="text">商家公告</div>
							</div>
							<div class="bulletin">
								<div class="content">粥品香坊其烹饪粥料的秘方源于中国千年古法，在融和现代制作工艺，由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐，发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。</div>
							</div>
						</div>

					</div>
					<div class="detail-close">
						<i class="icon-close" @click="hideDetail"></i>
					</div>
				</div>
				</transition>
    </div>
</template>

<script>
import Star from "../star/star";
export default {
	props: {
		seller: {
			type: Object
		}
	},
	components:{
		Star
	},
	data () {
		return {
			detailShow:false
		}
	},
	created() {
		this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
	},
	methods:{
		showDetail(){
			this.detailShow = true;
		},
		hideDetail(){
			this.detailShow = false;
		}
	}
}
</script>

<style lang="stylus" scoped>
@import "../../common/stylus/mixin.styl"
.header
	position relative
	background rgba(7,17,27,.5)
	color #fff
	overflow hidden
.content-wrapper
	position relative
	padding 24px 12px 18px 24px
	font-size: 0;
.avatar
	display:inline-block
	vertical-align top
	img
		width 64px
.content
	display inline-block
	margin-left 16px
	.title
		margin 2px 0 8px
		.name
			margin-left: 6px;
			font-size: 16px;
			line-height: 18px;
			font-weight: 700;
		.brand
			display inline-block
			vertical-align top
			width 30px
			height  18px
			bg-image('brand')
			background-size 30px 18px
			background-repeat  no-repeat
	.description
		margin-bottom 10px
		line-height 12px
		font-size 12px
	.support
		.text
			font-size 10px
			line-height 12px
		.icon
			display inline-block
			vertical-align top
			width 12px
			height 12px
			margin-right 4px
			background-size 12px 12px
			background-repeat no-repeat
			&.decrease
				bg-image('decrease_1')
.background
	position absolute
	top 0
	left 0
	width 100%
	height 100%
	z-index -1
	filter blur(10px)
.support-count
	position absolute
	right 12px
	bottom 14px
	padding 0 8px
	background-color rgba(0,0,0,.2)
	color #fff
	line-height 24px
	height 24px
	border-radius 14px
	span
		font-size 10px
		vertical-align top
	i
		margin-left: 2px;
		line-height: 24px;
		font-size: 10px;

.bulletin
	&-wrapper
		position relative
		height 28px
		font-size 0
		line-height 28px
		padding 0 22px 0 12px
		background rgba(7,17,27,.2)
		white-space nowrap
		overflow hidden
		text-overflow ellipsis
		i
			position: absolute;
			font-size: 10px;
			right: 12px;
			top: 8px;
	&-text
		vertical-align: top;
		margin: 0 4px;
		font-size: 10px

.bulletin-title
	display inline-block
	vertical-align top
	margin-top 8px
	width 22px
	height 12px
	background-size 100%
	bg-image('bulletin')

.detail
	position fixed
	top 0
	left 0
	width 100%
	height 100%
	background-color rgba(7,17,27,.8)
	z-index 99
	opacity 1
	&-wrapper
		min-height 100%
		display inline-block
	&-main
		margin-top 64px
		padding-bottom 64px
	&-close
		position relative
		width 32px
		height 32px
		margin -64px  auto 0;
		font-size 32px
		clear both
	.name
		line-height: 16px;
		text-align: center;
		font-size: 16px;
		font-weight: 700;
	.star
		margin-top 18px
		text-align center
	.title
		text-align center
		margin 28px auto 24px
		&::after,&::before
			content ""
			border-bottom 1px solid hsla(0,0%,100%,.2)
			width 110px
			display inline-block
			height 0
			vertical-align middle
		.text
			padding 0 12px
			font-size 14px
			font-weight 700
			display inline-block
.supports
	margin 0 auto
	width 80%
	&-item
		line-height 16px
		font-size 12px
		padding 0 12px
		margin-bottom 12px
		.icon
			width 16px
			height 16px
			vertical-align top
			margin-right 6px
			background-size 100%
.bulletin
	margin 0 auto;
	width 80%;
	padding 0 12px
	font-size 12px
	line-height 24px
.fade-enter-active, .fade-leave-active
	transition all .35s
.fade-enter,.fade-leave-to
	opacity 0;
</style>

